<template>
  <view class="no-data-container" :style="{ paddingTop: paddingTop + 'rpx' }">
    <view class="no-data-content">
      <!-- 图标部分 -->
      <view class="no-data-icon">
        <tui-icon :name="iconName" :size="iconSize" :color="iconColor"></tui-icon>
      </view>

      <!-- 提示文字 -->
      <view class="no-data-text">
        <slot>{{ text }}</slot>
      </view>

      <!-- 自定义按钮 -->
      <view v-if="showButton" class="no-data-button" @click="handleClick">
        <slot name="button">
          <button class="custom-btn">{{ buttonText }}</button>
        </slot>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  text: { type: String, default: '暂无数据' },
  iconName: { type: String, default: 'nodata' },
  iconSize: { type: Number, default: 80 },
  iconColor: { type: String, default: '#666' },
  showButton: { type: Boolean, default: false },
  buttonText: { type: String, default: '点击刷新' },
  // 设置 padding-top 距离
  paddingTop: { type: Number, default: 60 }
})

const emit = defineEmits(['click'])
const handleClick = () => emit('click')
</script>

<style scoped>
.no-data-container {
  width: 100%;
  box-sizing: border-box;
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.no-data-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.no-data-icon {
  margin-bottom: 30rpx;
}

.no-data-text {
  font-size: 28rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 40rpx;
}

.no-data-button {
  width: 100%;
}

.custom-btn {
  background-color: #007AFF;
  color: white;
  border-radius: 10rpx;
  padding: 20rpx 40rpx;
  font-size: 28rpx;
}

.custom-btn:active {
  opacity: 0.8;
}
</style>
